<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>信息页面</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<!-- 添加使用 -->
<div id="tj" style="display:none; border-radius:5px;">
<form class="layui-form" style="margin:20px 20px 20px 0px;">
  <div class="layui-form-item">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-block">
      <input type="text" name="did" lay-verify="required" lay-reqtext="ID是必填项，岂能为空？" autocomplete="off" placeholder="请输入ID" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="dname" lay-verify="required"  placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">出生日期</label>
      <div class="layui-input-block">
        <input type="text" name="ddate" id="date1" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="dsex" value="男" title="男" checked="">
      <input type="radio" name="dsex" value="女" title="女">
    </div>
  </div>
    
    <div class="layui-form-item">
    <label class="layui-form-label">学历</label>
    <div class="layui-input-block">
      <select name="dschool" lay-filter="aihao">
        <option value=""></option>
        <option value="专科">专科</option>
        <option value="本科">本科</option>
        <option value="硕士">硕士</option>
        <option value="博士">博士</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-block">
      <textarea name="dbz" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
    
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
       <button type="reset" id="consol" class="layui-btn layui-btn-primary">取消</button>
    </div>
  </div>
</form>
</div>

<!-- 修改使用 -->
<div id="xg" style="display:none; border-radius:5px;">
<form  class="layui-form" lay-filter="updlayui-form" style="margin:20px 20px 20px 0px;">
  <div class="layui-form-item">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-block">
      <input type="text" disabled name="did" lay-verify="required" lay-reqtext="ID是必填项，岂能为空？" autocomplete="off" placeholder="请输入ID" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="dname" lay-verify="required"  placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">出生日期</label>
      <div class="layui-input-block">
        <input type="text" name="ddate" id="date2" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="dsex" value="男" title="男" checked="">
      <input type="radio" name="dsex" value="女" title="女">
    </div>
  </div>
    
    <div class="layui-form-item">
    <label class="layui-form-label">学历</label>
    <div class="layui-input-block">
      <select name="dschool" lay-filter="aihao">
        <option value=""></option>
        <option value="专科">专科</option>
        <option value="本科">本科</option>
        <option value="硕士">硕士</option>
        <option value="博士">博士</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-block">
      <textarea name="dbz" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
    
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo2">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
       <button type="reset" id="consol2" class="layui-btn layui-btn-primary">取消</button>
    </div>
  </div>
</form>
</div>
 
 <!-- 查看使用 -->
 <div id="ck" style="display:none; border-radius:5px;">
<form  class="layui-form" lay-filter="cklayui-form" style="margin:20px 20px 20px 0px;">
  <div class="layui-form-item">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-block">
      <input type="text" style="border:none;" disabled name="did"  class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="dname" style="border:none;" disabled  class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">出生日期</label>
      <div class="layui-input-block">
        <input type="text" name="ddate" style="border:none;" disabled  class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
        <input type="text" name="dsex" style="border:none;" disabled  class="layui-input">
      </div>
  </div>
    
    <div class="layui-form-item">
    <label class="layui-form-label">学历</label>
   <div class="layui-input-block">
        <input type="text" name="dschool" style="border:none;" disabled  class="layui-input">
      </div>
  </div>
  
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-block">
      <textarea name="dbz" style="border:none;" disabled class="layui-textarea"></textarea>
    </div>
  </div>
    
  <div class="layui-form-item">
    <div style="width: 216px; margin: 0 auto;">
       <button type="reset" id="consol3" class="layui-btn layui-btn-fluid">关闭</button>
    </div>
  </div>
</form>
</div>
<!--  <div class="demoTable">
  搜索姓名：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
  </div>
  <button class="layui-btn" data-type="reload">搜索</button>
</div> -->
 
<table class="layui-hide" id="test" lay-filter="test"></table>
 
<script type="text/html" id="toolbarDemo">
<div class="layui-row">
  <div class="layui-btn-container layui-col-xs3">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">编辑</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">删除</button>
  </div>
	<div class="demoTable layui-col-xs6">
  搜索姓名：
  <div class="layui-inline">
    <input class="layui-input" style="height:30px;" name="dname" id="demoReload" autocomplete="off">
  </div>
  <button id="search" class="layui-btn layui-btn-sm" data-type="reload" lay-event="mysearch">搜索</button>
</div>
</div>
</script>


 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              
          
<script src="./dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
  <div id="test1"></div>
<script>
  layui.use('tree', function(){
    var tree = layui.tree;
   
    //渲染
    var inst1 = tree.render({
      elem: '#test1'  //绑定元素
      ,data: [{
        title: '江西' //一级菜单
        ,children: [{
          title: '南昌' //二级菜单
          ,children: [{
            title: '高新区' //三级菜单
            //…… //以此类推，可无限层级
          }]
        }]
      },{
        title: '陕西' //一级菜单
        ,children: [{
          title: '西安' //二级菜单
        }]
      }]
    });
  });
  </script>
 
<script>


layui.use(['table','laydate','form','layedit'], function(){
  var table = layui.table;
  
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,$ = layui.$
  ,laydate = layui.laydate
  ,active = {
   reload: function(){
   	
       var demoReload = $('#demoReload');
       var val=demoReload.val();
       console.log(demoReload.val());
       //执行重载
       table.reload('testReload', {
         page: {
           curr: 1 //重新从第 1 页开始
         }
         ,where: {
           
             dname: demoReload.val()
           
         }
       }, 'data');
       
       
     }
   };


  
  var tab=table.render({
    elem: '#test'
    ,url:'../xinxi/showall'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,title: '信息数据表'
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'did', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
      ,{field:'dname', title:'用户名', width:100, edit: 'text'}
      ,{field:'ddate', title:'出生日期', width:100, edit: 'text', templet: function(res){
        return '<em>'+ res.ddate +'</em>'
      }}
      ,{field:'dsex', title:'性别', width:80, edit: 'text', sort: true}
      ,{field:'dschool', title:'学历', width:80}
      ,{field:'dbz', title:'描述'}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:180}
     
    ]]
    ,page: true
    ,id:'testReload'00
    ,limits:[2,3,4,5]
  	,limit:2
  	,done:function(res){
  		$('#demoReload').val(res.dname);
  	}
  });
 
  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    console.log(obj);
    switch(obj.event){
      case 'mysearch':
    	// var type = $(this).data('type');
   	     //active[type] ? active[type].call(this) : '';
   	     active.reload();
   	     break;
      case 'getCheckData':
    	  var data = checkStatus.data;
    	  console.log(data);
          if(data.length !== 1){
              layer.msg('请选择一行');
            } else{
            	var updlayer=layer.open({
        	        type: 1
        	        ,title: "信息修改" //不显示标题栏
        	        ,anim: 1 //默认动画风格
        	        ,skin: 'layui-layer-molv' //默认皮肤
        	        ,closeBtn: false
        	        ,area: ['440px', '520px']
        	  		
        	        ,shade: 0.8
        	        ,id: 'LAY_layuiproupd' //设定一个id，防止重复弹出
        	        ,btnAlign: 'i'
        	        ,moveType: 1 //拖拽模式，0或者1
        	        ,content: $("#xg")
        	        ,success: function(layero){
        	          var btn = layero.find('.layui-layer-btn');
        	          btn.find('.layui-layer-btn0').attr({
        	            href: 'http://www.layui.com/'
        	            ,target: '_blank'
        	          });
        	        }
        	      });
        	//日期
        	  laydate.render({
        	    elem: '#date2'
        	  });
        	  form.val("updlayui-form", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
        		  "did": data[0].did // "name": "value"
        		  ,"dname": data[0].dname
        		  ,"ddate": data[0].ddate
        		  ,"dsex": data[0].dsex
        		  ,"dschool": data[0].dschool
        		  ,"dbz": data[0].dbz
        		});
        	  
        	  //监听提交
        	  form.on('submit(demo2)', function(data){
        		  console.log(data)
        		  $.ajax({
        				type:'post',
        				data:data.field,
        				url:'../xinxi/update',
        				
        				success:function (d){
        					if(d==1){
        					layer.close(updlayer);//关闭蒙层
        					tab.reload();//重载表格
        					layer.msg('修改操作成功！', {
        						  icon: 1,
        						  time: 1000 //2秒关闭（如果不配置，默认是3秒）
        						}); 
        					}

        				}
        			});					
        	    return false;
        	  });
        	  
        	//关闭
        	  layui.$('#consol2').on('click', function(){
        		  layer.close(updlayer);
        	  });
            	
            }
            	
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        if(data.length === 0){
            layer.msg('请至少选择一行');
          } else{
           
        var str="";
         for (var i = 0; i < data.length; i++) {
        	var s=JSON.stringify(data[i].did);
        	
        	s=s.substring(1,s.length-1)+",";
        	
        	str+=s;
        	
        	//console.log(JSON.stringify(data[i].did);
		} 
         
         str=str.substring(0, str.length-1);
         console.log(str);
         layer.confirm('真的删除您选择的行么', function(index){
         $.ajax({
        	 type:"delete",
        	 url:"../xinxi/deleteall/"+str+"",
        	 success:function(d){
         		if(d==1){
         			layer.close(index);
         			tab.reload();
         			layer.msg('删除成功！', {
         				  icon: 1,
         				  anim: 5,
         				  time: 1000 //2秒关闭（如果不配置，默认是3秒）
         				});
         		};
         	}
         });
       });
    };
         
      break;
      case 'isAll':
    	  var addlayer=layer.open({
		        type: 1
		        ,title: "信息添加" //不显示标题栏
		        ,anim: 1 //默认动画风格
		        ,skin: 'layui-layer-molv' //默认皮肤
		        ,closeBtn: false
		        ,area: ['440px', '520px']
    	  		
		        ,shade: 0.8
		        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
		        ,btnAlign: 'i'
		        ,moveType: 1 //拖拽模式，0或者1
		        ,content: $("#tj")
		        ,success: function(layero){
		          var btn = layero.find('.layui-layer-btn');
		          btn.find('.layui-layer-btn0').attr({
		            href: 'http://www.layui.com/'
		            ,target: '_blank'
		          });
		        }
		      });
    	//日期
    	  laydate.render({
    	    elem: '#date1'
    	  });
    	 
    	  
    	  //监听提交
    	  form.on('submit(demo1)', function(data){
    		  console.log(data)
    		  $.ajax({
					type:'post',
					data:data.field,
					url:'../xinxi/insert',
					
					success:function (d){
						if(d==1){
						layer.close(addlayer);//关闭蒙层
						tab.reload({
	        		         page: {
	        		           curr: 1 //重新从第 1 页开始
	        		         }
	        		       });
						layer.msg('添加操作成功！', {
							  icon: 1,
							  time: 1000 //2秒关闭（如果不配置，默认是3秒）
							}); 
						}

					}
				});					
    	    return false;
    	  });
    	  
    	//关闭
    	  layui.$('#consol').on('click', function(){
    		  layer.close(addlayer);
    	  });
    	  
      break;
      
      //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    console.log(obj)
    if(obj.event === 'detail'){
    	var cklayer=layer.open({
	        type: 1
	        ,title: "信息查看" //不显示标题栏
	        ,anim: 1 //默认动画风格
	        ,skin: 'layui-layer-molv' //默认皮肤
	        ,closeBtn: false
	        ,area: ['440px', '520px']
	  		
	        ,shade: 0.8
	        ,id: 'LAY_layuiprock' //设定一个id，防止重复弹出
	        ,btnAlign: 'i'
	        ,moveType: 1 //拖拽模式，0或者1
	        ,content: $("#ck")
	        ,success: function(layero){
	          var btn = layero.find('.layui-layer-btn');
	          btn.find('.layui-layer-btn0').attr({
	            href: 'http://www.layui.com/'
	            ,target: '_blank'
	          });
	        }
	      });
	
	  
	  form.val("cklayui-form", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
		  "did": data.did // "name": "value"
		  ,"dname": data.dname
		  ,"ddate": data.ddate
		  ,"dsex": data.dsex
		  ,"dschool": data.dschool
		  ,"dbz": data.dbz
		});
	  
	  //监听提交
	 
	//关闭
	  layui.$('#consol3').on('click', function(){
		  layer.close(cklayer);
	  });
    	
    }  
      
    else if(obj.event === 'del'){
    	
      layer.confirm('真的删除行么', function(index){
        $.ajax({
        	
        	type:"delete"
        		,url:"../xinxi/delete/"+data.did+""
        	,success:function(d){
        		if(d==1){
        			layer.close(index);
        			
        			tab.reload({
        		         page: {
        		           curr: 1 //重新从第 1 页开始
        		         }
        		       });
        			layer.msg('删除成功！', {
        				  icon: 1,
        				  anim: 5,
        				  time: 1000 //2秒关闭（如果不配置，默认是3秒）
        				});
        		}
        	}
        	
        });
      });
    } else if(obj.event === 'edit'){
    	console.log(data);
    	var updlayer=layer.open({
	        type: 1
	        ,title: "信息修改" //不显示标题栏
	        ,anim: 1 //默认动画风格
	        ,skin: 'layui-layer-molv' //默认皮肤
	        ,closeBtn: false
	        ,area: ['440px', '520px']
	  		
	        ,shade: 0.8
	        ,id: 'LAY_layuiproupd' //设定一个id，防止重复弹出
	        ,btnAlign: 'i'
	        ,moveType: 1 //拖拽模式，0或者1
	        ,content: $("#xg")
	        ,success: function(layero){
	          var btn = layero.find('.layui-layer-btn');
	          btn.find('.layui-layer-btn0').attr({
	            href: 'http://www.layui.com/'
	            ,target: '_blank'
	          });
	        }
	      });
	//日期
	  laydate.render({
	    elem: '#date2'
	  });
	  form.val("updlayui-form", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
		  "did": data.did // "name": "value"
		  ,"dname": data.dname
		  ,"ddate": data.ddate
		  ,"dsex": data.dsex
		  ,"dschool": data.dschool
		  ,"dbz": data.dbz
		});
	  
	  //监听提交
	  form.on('submit(demo2)', function(data){
		  console.log(data)
		  $.ajax({
				type:'post',
				data:data.field,
				url:'../xinxi/update',
				
				success:function (d){
					if(d==1){
					layer.close(updlayer);//关闭蒙层
					tab.reload();//重载表格
					layer.msg('修改操作成功！', {
						  icon: 1,
						  time: 1000 //2秒关闭（如果不配置，默认是3秒）
						}); 
					}

				}
			});					
	    return false;
	  });
	  
	//关闭
	  layui.$('#consol2').on('click', function(){
		  layer.close(updlayer);
	  });
    	
    }
  });
});
</script>

</body>
</html>